<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片开发</title>
  <link rel="stylesheet" href="index.css">
  <script src="jquery.js"></script>
  <script src="index.js"></script>
</head>
<body>

      data-role="lightbox" 表示这个元素要启用lightbox<br>
     data-source="image/1.jpg" 原图地址<br>
     data-group="group-1" 标识当前是否属于同一个组<br>
     data-id="xiaohai" 图片的唯一标识<br>
     data-caption="littleSea" 当前图片的描述文字<br>


<h1>1组图片</h1>

<div>
  <img data-role="lightbox"
       data-source="image/1.jpg"
       src="image/1.jpg"
       data-group="group-1"
       data-id="xiaohai"
       data-caption="littleSea"

       width="100" height="100">

  <img data-role="lightbox"
       data-source="image/7.jpg"
       src="image/7.jpg"
       data-group="group-1"
       data-id="zxcxz"
       data-caption="littsadsadsadaleSea"

       width="100" height="100">

  <img data-role="lightbox"
       data-source="image/8.jpg"
       src="image/8.jpg"
       data-group="group-1"
       data-id="trewtewrwe"
       data-caption="ewrsfdsfds"

       width="100" height="100">
</div><br>
<h1>2组图片</h1>
<div>
  <img data-role="lightbox"
       data-source="image/4.jpg"
       src="image/4.jpg"
       data-group="group-2"
       data-id="zzzz"
       data-caption="ddddd"

       width="100" height="100">
</div>

<script>
  $(function(){
    var lightbox = new LightBox({
      speed:300,
      maxWidth:'auto',
      maxHeight:'auto',
      maskOpacity:0.5,
      scalePic:0.8
    });
  })
</script>
</body>
</html>